<template>
  <div >
    <div>
      <div class="form">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="产品图片" >
            <el-upload
              class="upload-demo"
              ref="upload"
              action=""
              :with-credentials="true"
              :http-request="httpRequest"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="photo"
              list-type="picture"
              :auto-upload="false">
              <el-button size="small" type="primary" >点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="产品名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="产品类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择产品类型" style="width: 100%">
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品描述">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item label="产品内容">
            <UEditor  :config=config ref="ueditor"></UEditor>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getContent">确认修改</el-button>
          </el-form-item>

        </el-form>
      </div>


      <!--        <button size="primary" type="info" icon="plus" @click="getContent">获取内容</button>-->
    </div>
  </div>
</template>

<script>

  import UEditor from "../../UEditor";
  import axios from 'axios';
  import {requestGet, requestPost} from "../../../../network/request";
  export default{
    name: 'hello',
    props:['pid'],
    components: {UEditor},
    data(){
      return {
        pid: this.pid,
        image: undefined,
        url: '',
        photo: [],
        form: {
          img:'',
          name: '',
          description: '',
          type: '',
        },
        types: [{
          value: 'web',
          label: 'web'
        }, {
          value: 'pc',
          label: 'pc'
        }, {
          value: 'mobile',
          label: 'mobile'
        }],
        config: {
          value:'${microInformation.content}',
          // value:'',
          //可以在此处定义工具栏的内容
          // toolbars: [
          //  ['fullscreen', 'undo', 'redo','|','bold', 'italic', 'underline',
          //  '|','superscript','subscript','|', 'insertorderedlist', 'insertunorderedlist',
          //  '|','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify']
          // ],
          autoHeightEnabled: false,
          autoFloatEnabled: true,
         // initialContent:'',//初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
           autoClearinitialContent:false, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
          initialFrameWidth: null,
          initialFrameHeight: 450,
          BaseUrl: '',
          UEDITOR_HOME_URL: 'static/ueditor/'
        },
        addFormVisible: false
      }
    },
    mounted() {
      const _this=this;
      _this.editor=window.UE.getEditor("editor",this.config);
      requestPost({
        url: 'product/selectImg',
        data: {
          id: this.pid
        }
      }).then(res=>{
        this.photo.push({name: '产品预览图', url: res.data.url});
        this.url = res.data.url;
      });
      requestPost({
        url: 'product/select',
        data: {
          id: this.pid
        }
      }).then(res=>{
        this.form = res.data;
        _this.editor.ready(function () {
          _this.editor.setContent(res.data.html);
        })
      })
    },
    methods: {
      // param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file
      httpRequest(param) {
        this.image= param.file; // 相当于input里取得的files

      },

      //上传成功后显示图片
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePreview(file) {
        // console.log(file);
      },
      //获取文档内容 上传产品信息 图片在上面的action里面提交
      getContent: function(){
        this.$refs.upload.submit();
        let fd = new FormData();// FormData 对象
        let content = this.$refs.ueditor.getUEContent();
        fd.append('pid',this.pid);
        fd.append('html',content);
        fd.append('image', this.image);// 文件对象
        fd.append('name',this.form.name);
        fd.append('type',this.form.type);
        fd.append('img',this.url);
        fd.append('description',this.form.description);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        let url = 'http://localhost:8080/product/update'
        axios.post(url, fd, config).then(res=>{
          if(res.code===0){
            this.submitForm();//提交表单
          }
        })
        alert("修改成功");
        this.$router.replace("/content/product");
      },


    }
  }

</script>
<style>
  .form{
    text-align: center;
    margin: 0 auto;
  }
</style>
